<template>
	<view>
		<van-tabs  :active="active" @change="onChange">
			<van-tab v-for="(itemm,indexx) in title" :key = "indexx" :title="itemm.piazzaName">
				<swiper circular="true" style="margin: 0 10upx; width: 730upx;" class="swiper-box" autoplay="true"
					@change="change" :indicator-dots="true" indicator-active-color="black"
					indicator-color="rgba(255,255,255,1)">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.picturesUrl"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 		<image style="margin: 0 10upx; width: 730upx;" v-if="aDImage==''" class="AD"
			:src="aDImage"
			mode=""></image> -->

				<view class="waterfall-box h-flex-x h-flex-2">
					<view>
						<helang-waterfall v-for="(item,index) in leftList" :key="index" :params="item"
							:hasLike="hasLike" tag="left" :index="index" @height="onHeight" @click="onClick">
						</helang-waterfall>
					</view>
					<view>
						<helang-waterfall v-for="(item,index) in rightList" :key="index" :params="item"
							@height="onHeight" @click="onClick" tag="right" :index="index"></helang-waterfall>
					</view>
				</view>
				<view class="load-txt">{{ajax.loadTxt}}</view>
			</van-tab>
<!-- 			<van-tab title="标签 2">内容 2</van-tab>
			<van-tab title="标签 3">内容 3</van-tab>
			<van-tab title="标签 4">内容 4</van-tab> -->
		</van-tabs>

	</view>
</template>

<script>
	import helangWaterfall from "./helang-waterfall"
	export default {
		components: {
			"helang-waterfall": helangWaterfall
		},
		data() {
			return {
				title:[],
				type:1,
				active: 1,
				hasLike: false,
				lists: [],
				contentList: [],
				active: 0,
				info: [{
					picturesUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp297314383.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678428536&t=aae5f2fa08039e2a1e222d77e77014d1"
				},{
					picturesUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp328808335.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678428674&t=9067358f0830e8a3d26fa78ecefb3001"
				}],
				current: 0,
				mode: 'default',
				cotrols: false,
				isLike: false,
				currentType: 1,
				page: 1,
				pageurl: "/type/getTypesByPage?page=1",
				aDImage: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.jiemian.com%2F101%2Foriginal%2F20200227%2F15827353606974100_a580xH.jpeg&refer=http%3A%2F%2Fimg2.jiemian.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654946223&t=3f335f75871d4f86a42c195fe1ead225",
				total: 0,
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows: 10,
					// 页码
					page: 1,
				}
			}
		},
		onLoad() {
			// this.getswiper()
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.ajax.load = true;
			this.getList();
			this.getTitle();
		},
		// 触底触发
		onReachBottom() {
			if (this.contentList.length < this.total) {
				this.page += 1
				this.$request('/post/list?page=' + this.page, {
					// 传参参数名：参数值,如果没有，就不需要传
				}, 'GET').then(res => {
					// 打印调用成功回调
					// this.contentList = res.records;
					this.total = res.total
					// console.log(this.contentList.length);
					this.contentList = this.contentList.concat(res.records)
					this.addList(res.records)
					console.log(this.contentList)
				}).catch(err => {
					console.log(err)
				})
			} else {
				console.log("到底了pojie");
			}
			// this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.ajax.load = true;
			this.getList();
		},
		methods: {
			getTitle(){
				this.$request('/post/type', {
					// 传参参数名：参数值,如果没有，就不需要传
				}, 'GET').then(res => {
					console.log(res);
					this.title = res
				}).catch(err => {
					console.log(err)
				})
			},
			onChange(event) {
				this.type = this.title[event.detail.name].id
				this.contentList = []
				this.ajax.page = 1;
				this.leftHeight = 0;
				this.rightHeight = 0;
				// this.ajax.load = true;
				this.getList();
			  },
			change(e) {
				this.current = e.detail.current;
			},
			toDetail(post_id) {
				uni.navigateTo({
					url: '../tabbar-1/detail/detail3?post_id=' + post_id
				})
			},
			// 监听高度变化
			onHeight(height, tag) {
				// console.log(tag);
				if (tag == 'left') {
					// console.log("left",this.leftHeight);
					this.leftHeight += height;
				} else {
					// console.log("right",this.rightHeight);
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index, tag) {},
			// 获取数据
			getList(num) {
				/* 
					无真实数据，当前由 setTimeout 模拟异步请求、
					自行替换 请求方法将数据 传入 addList() 方法中
					自行解决数据格式，自行修改组件内布局和内容绑定
				*/
				const page = 1;
				const type = this.type;
				console.log(type);
				if (!this.ajax.load) {
					return;
				}
				console.log(num);
				this.page = 1
				this.ajax.load = false;
				this.ajax.loadTxt = '加载中';
				this.$request('/post/list?page=' + page+'&type=' + type, {
					// 传参参数名：参数值,如果没有，就不需要传
				}, 'GET').then(res => {
					console.log(res)
					// 打印调用成功回调
					this.addList(res.records)
					this.total = res.total
					this.contentList = res.records
					// // uni.stopPullDownRefresh()
					// this.total = res.total
					// this.contentList = res.records;
					console.log(res.records)
				}).catch(err => {
					console.log(err)
				})
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				// console.log(res);

				if (!res || res.length < 1) {
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// console.log(differ);
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index) => {
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if (differ >= 600 && index < 3) {
						// console.log("左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边");
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if (differ <= -600 && index < 3) {
						// console.log("右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边");
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if (differ >= 350 && index < 2) {
						// console.log("左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边");
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if (differ <= -350 && index < 2) {
						// console.log("右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边");
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i + differVal) % 2 == 0) {
						// console.log("当前数据序号为偶数时，则插入到左边");
						return 'left';
					} else {
						// console.log("当前数据序号为奇数时，则插入到右边");
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if (getDirection(index) == 'left') {
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					} else {
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if (this.ajax.page == 1) {
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				} else {
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}
</style>

<style lang="scss" scoped>
	.content {
		text-align: center;
		flex-wrap: wrap;
		display: flex;
		background-color: #f1f3f4
	}

	.is_active {
		font-size: 29upx;
		color: #f4ad50;
	}

	.no_active {
		font-size: 29upx;
	}

	.tab {
		text-align: center;
		margin-top: 20upx;
		margin-left: 15upx;
		// margin-right: 47upx;
		width: 17%;
		border: #dad6cf 1pt solid;
	}

	.message_content {
		margin-top: 3%;
		// margin-left: -18upx;
		width: 100%;
		height: auto;
		// position: absolute;
	}

	.AD {
		margin-top: 2%;
		width: 750upx;
		height: 250upx;
	}

	.swiper-box {
		height: 250upx;
	}

	.swiper-item>image {
		width: 100%;
		height: 300upx;
	}

	* {
		box-sizing: border-box;
	}

	.imgview {
		width: 30%;
		display: flex;
	}

	.imgview>img {
		margin-top: 2.5%;
		margin-left: 2.5%;
		width: 100%;
		height: 221upx;
	}

	.showMessage {
		/* position: relative; */
		height: auto;
		/* margin-top: 15upx; */
		/* border: 1px red solid; */
		background-color: white;
	}

	.showMessage_fotter {
		height: 50upx;
		margin-top: 2%;
		/* height: auto; */
		/* border: 1px red solid; */
		/* margin-left: 30%; */
		border-bottom: 0.5px solid #f1f3f4;
		position: relative;
	}

	.waterfall-box {
		padding: 20rpx 10rpx;
		box-sizing: border-box;

		>view {
			padding: 0 10rpx;
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>
